<template>
  <div>
    <y-form
      @formChange="change"
      :modelValue="modelValue"
      :readOnly="false"
      :formConfig="formConfig"
    >
      <template slot-scope="{ self }">
        <input
          type="text"
          v-model="self.model"
          :placeholder="self.getPlaceholder('请输入')"
          @change="self.handleChange"
        />
      </template>
    </y-form>
  </div>
</template>

<script>
export default {
  name: "cp2",
  methods: {
    change(obj) {
      console.log(obj);
    },
  },
  data() {
    return {
      modelValue: {
        value8: [],
      },
      formConfig: {
        labelWidth: 100,
        rows: 4,
        cols: 1,
        list: [
          {
            label: "文本",
            type: "input",
            tooltip: {
              content: "提示",
              effect: "light",
              placement: "top",
            },
            prop: "value1",
            rules: {
              required: true,
              message: "请输入邮箱地址",
              trigger: "blur",
            },
          },
          {
            span: 1,
            label: "日选择器",
            type: "date",
            prop: "value2",
            rules: {
              required: true,
              message: "请输入邮箱地址",
              trigger: "blur",
            },
          },
          {
            span: 1,
            label: "周选择器",
            type: "week",
            prop: "value3",
          },
          {
            label: "月选择器",
            type: "month",
            prop: "value3",
          },
          {
            label: "年选择器",
            type: "year",
            prop: "value4",
          },
          {
            label: "文本",
            type: "daterange",
            prop: "value5",
          },
          {
            label: "文本",
            type: "datetime",
            prop: "value6",
          },
          {
            label: "文本",
            type: "datetimerange",
            prop: "value7",
          },
          {
            label: "多选",
            type: "checkbox",
            prop: "value8",
            optionsList: [
              {
                label: "文本",
                id: "1",
              },
              {
                label: "文本",
                id: "2",
              },
            ],
          },
          {
            label: "文本域",
            type: "textarea",
            prop: "value14",
            autosize: {
              minRows: 3,
              maxRows: 3,
            },
          },
          {
            label: "颜色",
            type: "colorPicker",
            prop: "value9",
          },
          {
            label: "数字",
            type: "number",
            prop: "value10",
          },
          {
            label: "slot",
            type: "slot",
            slotName: "slot1",
            prop: "value13",
          },
          {
            label: "密码",
            type: "input",
            prop: "value10",
          },
          {
            label: "单选",
            type: "radio",
            prop: "value11",
            optionsList: [
              {
                label: "文本",
                id: 1,
              },
              {
                label: "文本",
                id: 2,
              },
            ],
          },
          {
            label: "评分",
            type: "rate",
            prop: "value12",
          },

          {
            label: "switch",
            type: "switch",
            prop: "value14",
          },
          {
            label: "时间",
            type: "timeSelect",
            prop: "value15",
          },
          {
            span: 2,
            label: "滑动",
            type: "slider",
            prop: "value99",
            tooltip: {
              content: `由于本身组件的问题高度<br/>不一致导致换行`,
              effect: "light",
              placement: "top",
            },
            marks: { 0: "0", 50: "50", 100: "100" },
          },
          {
            label: "下拉",
            type: "select",
            prop: "value16",
            optionsList: [
              {
                label: "文本",
                id: 1,
              },
              {
                label: "文本",
                id: 2,
              },
            ],
          },
          {
            label: "render",
            type: "render",
            prop: "value17",
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-input
                    v-on:change={self.handleChange}
                    type="text"
                    placeholder={self.getPlaceholder("和")}
                    v-model={self.model}
                  ></el-input>
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>

